<script setup lang="ts">
import Taro from "@tarojs/taro";
import { useRouter } from "@tarojs/taro";

import ByCell from "@/components/ui/ByCell.vue";
import Page from "@/components/common/Page.vue";
import ByButton from "@/components/ui/ByButton.vue";
import ContentBox from "@/pages/index/components/ContentBox.vue";

import useApp from "@/stores/app";
import useForm from "@/hooks/useForm";
import useFetch from "@/hooks/useFetch";
import useSubscribeMessage from "@/hooks/useSubscribeMessage";

import ApiMerchant from "@/api/merchant";

import { TMerchantInfo, TStaffResult } from "@/global";
const { params } = useRouter();
const mid = params.mid as string;

const stateApp = useApp();

// 订阅通知：店员申请
const subscribe = useSubscribeMessage("staff");

// 获取店员申请审核结果
const { data: applyResult } = useFetch<TStaffResult>(
  ApiMerchant.applyMerchantStaffResult,
  {
    defaultParams: { merchant_id: parseInt(mid) },
    afterFetch: (res: any) => res,
    onSuccess: (res: any) => {
      // 如果没有审核结果，显示申请页面
      if (!res) {
        runMerchantInfo();
      }

      // 如果审核未通过，跳转到审核结果页面
      if (res?.status === 1) {
        Taro.redirectTo({
          url: `/packageMerchant/pages/staff/result?mid=${mid}`,
        });
      } else if (res?.status === 2) {
        Taro.switchTab({
          url: `/pages/merchant/index?mid=${mid}`,
        });
      }
    },
    showLoading: true,
  }
);

// 获取商户详情
const { data: merchantInfo, run: runMerchantInfo } = useFetch<TMerchantInfo>(
  ApiMerchant.getMerchantDetailById,
  {
    defaultParams: {
      id: parseInt(mid),
    },
    afterFetch: (res: any) => res?.merchant_detail,
  }
);

// 店员申请加入商户
const { loading, model, submit } = useForm(ApiMerchant.applyMerchantStaff, {
  defaultModel: {
    merchant_id: parseInt(mid),
    staff_name: "",
    mobile: stateApp.userInfo?.mobile,
  },
  rules: {
    staff_name: { required: true, message: "请填写真实姓名" },
  },

  onSuccess() {
    Taro.showToast({ title: "申请成功" });
    setTimeout(() => {
      // 跳转到审核结果页面
      Taro.redirectTo({
        url: `/packageMerchant/pages/staff/result?mid=${mid}`,
      });
    }, 1500);
  },
});

// 提交按钮点击事件
const handleBtnTap = async () => {
  // 订阅模板消息
  await subscribe();
  submit();
};
</script>

<template>
  <Page height="200rpx" v-if="merchantInfo">
    <ContentBox class="mt-6">
      <view class="px-6 pb-6">
        <ByCell label="品牌名称">
          <view class="text-right">
            <view class="inline-block relative">
              {{ merchantInfo?.merchant_title }}
            </view>
          </view>
        </ByCell>
      </view>
    </ContentBox>

    <ContentBox class="mt-6" hideBgImg>
      <view class="px-6 pb-6">
        <ByCell label="姓名">
          <input
            v-model="model.staff_name"
            class="h-[92px] leading-[92px] text-right"
          />
        </ByCell>

        <ByCell label="手机号">
          <input
            :disabled="true"
            :value="stateApp.userInfo?.mobile"
            class="h-[92px] leading-[92px] text-right"
          />
        </ByCell>

        <ByButton
          block
          type="primary"
          class="mt-5.5"
          :loading="loading"
          @tap="handleBtnTap"
          >申请加入
        </ByButton>
      </view>
    </ContentBox>
  </Page>
</template>
